<template>
  <div class="icon-group">
    <h3>{{ groupTitle }}</h3>

    <div class="icon-group__main">
      <icon-display v-for="icon in iconList" v-bind="icon"></icon-display>
    </div>

  </div>
</template>

<script>
import IconDisplay from './display.vue'

export default {
  name: "group",

  components: {
    IconDisplay
  },

  props: {
    groupTitle: String,

    iconList: {
      type: Array,
      default: () => ([])
    }
  }
}
</script>

<style scoped>
.icon-group__main {
  display: grid;
  grid-template-columns: repeat(6, 140px);
  padding: 1rem 0;
}
</style>
